<template>
    <div class="page">
        <div class="main-title">
            <span>我的授信</span>
            <button @click="do_address_add()">
                <!-- <img src="@img/address-add.png" alt="" /> -->
                <i class="el-icon-circle-plus"></i>
                <span class="add-text">申请额度</span>
            </button>
        </div>
        <div class="main-content">
            <div style="display: flex">
                <img class="main-content-img" src="@/assets/img/newImg/erdu.png" alt="">
                <div>
                    <div class="main-content-num"><span>{{ companyLimit.creditLimit }}.</span><span class="main-content-zero">00</span></div>
                    <div class="main-content-tips">总授信额度</div>
                </div>
            </div>
            <div style="display: flex">
                <img class="main-content-img" src="@/assets/img/newImg/qianbao.png" alt="">
                <div>
                    <div class="main-content-num"><span>{{ companyLimit.nowLimit }}.</span><span class="main-content-zero">00</span></div>
                    <div class="main-content-tips">剩余可用额度</div>
                </div>
            </div>
        </div>

        <div class="page-ctx">
            <div class="tab-box">
                <div class="tab-list">
                    <div v-for="(item, index) in tabList" :key="index" class="tab-item"
                        :class="tabSelect.value == item.value ? 'active' : ''" @click="do_toggle_tab(item)">
                        {{ item.title }}
                        <span class="number" v-if="item.num">{{item.num}}</span>
                    </div>
                </div>

            </div>
            <div class="center">
                <div class="wrap-address" >
                    <div class="table-header mt20">
                        <div class="table-cell1">序号</div>
                        <div class="table-cell2">申请额度</div>
                        <div class="table-cell3">当前额度</div>
                        <div class="table-cell4">状态</div>
                        <div class="table-cell5">申请时间</div>
                    </div>
                    
                    <div class="table-body" v-for="(item,index) in list_address" :key="item.id">
                        <div class="table-cell1">{{ index+1 }}</div>
                        <div class="table-cell2"> {{ vuex_huobi }} {{item.limitMoneys.toFixed(2)}}</div>
                        <div class="table-cell3"> {{ vuex_huobi }} {{companyLimit.nowLimit.toFixed(2)}}</div>
                        <div class="table-cell4">
                            <div>{{ statusList[+item.applyStatus] }}</div>
                            <div class="table-cell4-num" v-if="item.applyStatus == 2">拒绝原因：{{ item.reason }}</div>
                        </div>
                        <div class="table-cell5">{{ item.createTime }}</div>
                    </div>

                </div>

                <el-empty v-if="!list_address.length" description="没有信息"></el-empty>
            </div>
        </div>

    </div>
</template>

<script>

import { mapState } from "vuex";
export default {
    components: {
    },
    data() {
        return {
            tabSelect: {
                title: "全部",
                value: 0,
            },

            pagination: {
                page: 1,
                pageNum: 100,
            },

            activeMenu: "address", // 当前选中的菜单
            list_address: [

            ],
            companyLimit:{},
            info:{},
           // 状态 0待审核 1通过 2拒绝

            statusList:{
                0: '待审核',
                1: '通过',
                2: '拒绝'
            }

        };
    },
    computed: {
        ...mapState([""]),

        tabList() {
            //scene
            //筛选状态：0-全部 1-待支付 2-待发货 3-待收货 4-待核销 5-已完成 6-待评价 7-已取消
            //orderStatus
            //订单状态：-5-待支付  -1-已取消  2-待发货  3-待收货  4-待自提  5-已完成
            let list = [
                { value: 0, title: "全部", number_key: "allList", num:0},
                { value: 1, title: "待审核", number_key: "waitExamine", num:0 },
                { value: 2, title: "已通过", number_key: "examineNo" , num:0},
                { value: 3, title: "已拒绝", number_key: "examineYes", num:0 },
            ];
            return list;
        },
    },
    created() {
        this.setView();
    },
    methods: {
        do_toggle_tab(item){
            this.tabSelect = item;
            this.list_address = this.info[item.number_key];
        },
        setView() {
            this.$httpApi("/api/v1/purchaser/apply/limit/list", {
            }, "get").then(res => {
                this.companyLimit = res.data.companyLimit;
                this.info = res.data;
                this.list_address = res.data["allList"];
                this.tabList.forEach(item => {
                    item.num = res.data[item.number_key].length;
                })
            }).catch(err => {
              alertErr(err.msg || '网络异常，请稍后重试！')
            })
        },
        do_address_add(){
            this.$router.push('/my-applay')
        }
    },
};
</script>

<style scoped lang="less">
.table-header {
    width: 800px;
    height: 50px;
    background: #F5F5F5;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    align-items: center;

}

.table-cell1 {
    padding-left: 10px;
    width: 10%;
}

.table-cell2 {
    width: 20%;
}

.table-cell3 {
    width: 20%;
}

.table-cell4 {
    width: 30%;
    line-height: 20px;
}

.table-cell4-num {
    color: #EF1F1F;
}

.table-cell5 {
    width: 20%;
    padding-right: 10px;

}

.table-body {
    width: 800px;
    height: 52px;
    background: #fff;
    font-weight: 400;
    font-size: 14px;
    line-height: 52px;
    color: #333333;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #EBEEF5;
}


.tab-box {
    padding-right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    // border: 1px solid #cccccc;

    .tab-list {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 20px;
        color: #7d7d7d;

        .tab-item {
            position: relative;
            // min-width: 96px;
            font-weight: 400;
            font-size: 14px;
            color: #333333;
            height: 48px;
            line-height: 48px;
            cursor: pointer;
            margin-right: 20px;

            .number {
                color: #EF1F1F;
            }

            &.active {
                // background: #009F39;
                // color: #fff;
                // font-weight: bold;
                // color: #009f39;
                font-weight: 500;
                color: #EF1F1F;

                &::after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    height: 3px;
                    background: #EF1F1F;
                }
            }
        }
    }
}

.page {
    text-align: left;
    padding-bottom: 80px;

    .main-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 32px;
        text-align: left;
        height: 56px;
        line-height: 56px;
        background: #ffffff;
        font-size: 16px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #333333;

        button {
            display: flex;
            align-items: center;
            min-width: 96px;
            height: 30px;
            line-height: 30px;
            background: #EF1F1F;
            color: #fff;
            background: #fff;
            color: #000000;
            font-size: 14px;
            // font-weight: bold;

            img {
                width: 20px;
            }

            .el-icon-circle-plus {
                font-size: 18px;
                color: #EF1F1F;
            }

            .add-text {
                margin-left: 5px;
            }
        }
    }

    .main-content {
        height: 124px;
        background-color: #fff;
        border-top: 1px solid #EAEEF1;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .main-content-img {
            width: 60px;
            height: 60px;
            margin-right: 10px;
        }

        .main-content-num {
            font-weight: bold;
            font-size: 28px;
            color: #484848;
        }

        .main-content-zero {
            font-size: 20px;
        }

        .main-content-tips {
            font-weight: 400;
            font-size: 14px;
            color: #606060;
        }
    }

    .page-ctx {
        margin-top: 24px;
        padding: 32px 32px 55px 32px;
        background: #fff;
    }
}

// 地址列表
.wrap-address {
    margin-top: 24px;
    text-align: left;

    .address-item {
        min-height: 190px;
        background: #ffffff;
        border: 1px solid #e5e5e5;
        padding: 20px;
        margin-bottom: 20px;

        .top {
            padding-bottom: 20px;

            >div {
                margin-bottom: 10px;
                color: #333333;

                &:last-child {
                    margin-bottom: 0;
                }

                span {
                    font-size: 14px;
                    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                    font-weight: 400;
                    color: #666666;
                }
            }
        }

        .bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-top: 1px solid #eeeeee;
            padding-top: 20px;

            .left {
                .moren {
                    display: inline-block;
                    width: 104px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    // background: rgba(255, 90, 0, 0.68);
                    background: #009F39;
                    font-size: 14px;
                    color: #ffffff;
                }
            }

            .right {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                line-height: 20px;
                color: #009F39;

                .action {
                    margin-left: 20px;
                    cursor: pointer;
                }
            }
        }
    }
}
</style>

<style scoped lang="less" src="@/assets/h5css/user/address-list.less"></style>